import { defineComponent, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { getGovernGlobalScore } from '@/service/modules/integration-govern'
import { useMessage } from 'naive-ui'

const healthDegree = defineComponent({
  name: 'healthDegree',
  emits: ['channelScoreList'],
  setup(props, { emit }) {
    const sumScore = ref(0)
    const scoreLevel = ref('')
    const scoreList = ref([])
    const setEchartsData = function () {
      const option = {
        title: {
          text: '健康度总分'
        },
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.6, '#FF6E76'],
                  [0.75, '#FDDD60'],
                  [0.9, '#58D9F9'],
                  [1, '#7CFFB2']
                ]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '60%',
              width: 10,
              offsetCenter: [0, '-15%'],
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              length: 10,
              lineStyle: {
                color: 'auto',
                width: 1
              }
            },
            splitLine: {
              length: 15,
              lineStyle: {
                color: 'auto',
                width: 3
              }
            },
            axisLabel: {
              color: '#464646',
              fontSize: 15,
              distance: -45,
              formatter: function (value: number) {
                if (value >= 0.9) {
                  return '优'
                } else if (value >= 0.75) {
                  return '良'
                } else if (value >= 0.6) {
                  return '中'
                } else if (value <= 0.6) {
                  return '差'
                }
              }
            },
            title: {
              offsetCenter: [0, '0%'],
              fontSize: 15
            },
            detail: {
              fontSize: 30,
              offsetCenter: [0, '30%'],
              valueAnimation: true,
              formatter: function (value: number) {
                return Math.round(value * 100) + '分'
              },
              color: 'auto'
            },
            data: [
              {
                value: sumScore.value,
                name: scoreLevel.value
              }
            ],
            center: ['25%', '55%'],
            radius: 95
          },
          {
            name: 'Budget vs spending',
            type: 'radar',
            // color:'7CFFB2',
            data: [
              {
                value: scoreList.value,
                name: 'Allocated Budget'
              }
            ]
          }
        ],
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '计算', max: 100 },
            { name: '存储', max: 100 },
            { name: '规范', max: 100 },
            { name: '安全', max: 100 },
            { name: '质量', max: 100 }
          ],
          center: ['75%', '45%'],
          radius: 90
        }
      }
      const dom: any = document.getElementById('healthDegreeChart')
      const myChart = echarts.init(dom)
      myChart.setOption(option)
    }
    onMounted(() => {
      getGovernGlobalScore()
        .then((res: any) => {
          scoreLevel.value = res.data.scoreLevel
          sumScore.value = res.data.sumScore / 100
          scoreList.value = res.data.scoreList
          emit('channelScoreList', scoreList.value)
          setEchartsData()
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
        })
    })

    const message = useMessage()

    return {
      setEchartsData,
      sumScore,
      scoreLevel,
      scoreList,
      message
    }
  },
  render() {
    return (
      <div style={'width: 100%;'}>
        <div id='healthDegreeChart' style='width: 100%; height: 300px;'></div>
      </div>
    )
  }
})

export default healthDegree
